<template>
  <div>
    <img
      class="banner"
      src="https://www.hnair.com/adnews/xiangyuelvxingji/images/banner.jpg"
      alt=""
    />
    <div class="homepage">
      <el-form
        label-position="right"
        label-width="80px"
        :model="formLabelAlign"
        :rules="rules"
        ref="formLabelAlign"
        class="form_box"
      >
        <el-form-item label="从" prop="from_place">
          <el-input
            v-model="formLabelAlign.from_place"
            placeholder="出发地"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="交换">
          <el-button
            icon="el-icon-refresh"
            circle
            @click="change_place"
          ></el-button>
        </el-form-item>
        <el-form-item label="到" prop="to_place">
          <el-input
            v-model="formLabelAlign.to_place"
            placeholder="目的地"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="出发" prop="departure_day">
          <el-date-picker
            v-model="formLabelAlign.departure_day"
            type="date"
            placeholder="选择出发时间"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="归程" prop="return_day">
          <el-date-picker
            v-model="formLabelAlign.return_day"
            type="date"
            placeholder="选择日期时间"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="search_ticket('formLabelAlign')"
            class="search_btn"
            >搜索机票</el-button
          >
        </el-form-item>
      </el-form>
      <div class="recommend">
        <recommend />
      </div>
    </div>
    <div class="serach_flight_table" :class="display">
      <flight_table :flight_detail_data="flight_detail_data" />
    </div>
  </div>
</template>

<script>
import request from "../request/http";
import recommend from "../components/common/recommend";
import flight_table from "./common/table";

export default {
  name: "Home",
  components: {
    recommend,
    flight_table,
  },
  data() {
    const validatePass1 = (rule, value, callback) => {
      if (value == this.formLabelAlign.to_place) {
        callback(new Error("起点和终点不能一致!"));
      } else {
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value == this.formLabelAlign.from_place) {
        callback(new Error("起点和终点不能一致!"));
      } else {
        callback();
      }
    };
    return {
      flight_detail_data: [],
      pickerOptions: {
        disabledDate(time) {
          // 只能选择当天及以后的时间
          return time.getTime() < Date.now() - 1 * 24 * 3600 * 1000;
        },
      },
      // 定义表单信息
      formLabelAlign: {
        from_place: "",
        to_place: "",
        departure_day: "",
        return_day: "",
      },
      // 定义校验规则
      rules: {
        from_place: [
          { required: true, message: "请输入起点", trigger: "blur" },
          { required: true, trigger: "blur", validator: validatePass1 },
        ],
        to_place: [
          { required: true, message: "请输入终点", trigger: "blur" },
          { required: true, trigger: "blur", validator: validatePass2 },
        ],
        departure_day: [
          {
            type: "date",
            required: true,
            message: "请选择出发日期",
            trigger: "blur",
          },
        ],
      },
      display: "none",
    };
  },
  methods: {
    search_ticket(formName) {
      const _self = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(_self.formLabelAlign);
          request({
            url: "/flight/get-flight-info/",
            params: _self.formLabelAlign,
          })
            .then((res) => {
              this.flight_detail_data = res.data;
              this.display = "show";
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          return;
        }
      });
    },
    change_place() {
      var now_from = this.formLabelAlign.from_place;
      var now_to = this.formLabelAlign.to_place;
      this.formLabelAlign.from_place = now_to;
      this.formLabelAlign.to_place = now_from;
    },
    // 格式化时间
    formatTime(date) {
      var json_date = new Date(date);
      var datetime =
        json_date.getFullYear() +
        "-" +
        (json_date.getMonth() + 1) +
        "-" +
        json_date.getDate() +
        " " +
        json_date.getHours() +
        ":" +
        json_date.getMinutes();
      return datetime;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.banner {
  position: absolute;
  opacity: 0.1;
  filter: alpha(opacity=40);
  z-index: -1;
  width: 100%;
}
.modal-open {
  overflow-y: scroll;
}
.homepage {
  display: flex;
}
.form_box {
  width: 480px;
}
.el-input {
  width: 400px;
}
.search_btn {
  float: right;
}

.recommend {
  float: right;
  margin: 0 10px;
}
.none {
  display: none;
}
.show {
  display: block;
}
</style>
